<template>
  <div class="box">
    <ul>
      <li
        v-for="(item, index) in tab"
        :key="index"
        @click="nav(index)"
        :class="index1 == index ? 'active' : ''"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ["index1"],
  name: "",
  components: {},
  data() {
    return {
      tab: ["首页", "分类", "购物车", "我的"],
    };
  },
  created() {},
  mounted() {},
  methods: {
    nav(i) {
      this.$emit("nav", i);
    },
  },
};
</script>
<style scoped lang="scss">
.box {
  overflow: hidden;
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    height: 100px;
    background: red;
    margin: 200px 0;
    border-radius: 40px;
    li {
      width: 25%;
      color: #fff;
      font-size: 32px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      border-radius: 40px;
    }
    .active {
      background: blue;
    }
  }
}
</style>
